<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>油价查询</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">
</head>
<body>
<div id="app">
<template>
    <van-cell-group :title="province">
      <van-cell v-for="item in lists" :key="item.id">
        <span slot="title"><span class="title" v-text="item.pname"></span><span class="des" v-text="item.pdes"></span></span>
        <h2><span v-text="item.price"></span><span class="des">元/升</span></h2>
      </van-cell>
    </van-cell-group>
</template>
</div>
<!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
<!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
      title: '油价查询',
      province: '山东',
      lists: [],
      token:''
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
    mag.toLogin(function(rs) {
      this.token = rs.token
      localStorage.setItem('token', rs.token)
      this.fetchData()
    })    
  },
  methods: {
    fetchData () {
      let that = this
      let postparams = {
        token: localStorage.getItem('token'),
        province_name: this.province,
      }
      axios.post('/CarInfo/getOilPrice', postparams).then(({data}) => {
        // console.log(data)
        let lists = []
        if (data.code === 200) {
          let datas = data.data
          let list = {}
          for (let key in datas) {
            if (key === '92h') {
              let list0 = {}
              list0.pname = '92#'
              list0.pdes = '汽油'
              list0.price = datas[key]
              lists.push(list0)
            } else if (key === '95h') {
              let list1 = {}
              list1.pname = '95#'
              list1.pdes = '汽油'
              list1.price = datas[key]
              lists.push(list1)
            } else if (key === '98h') {
              let list2 = {}
              list2.pname = '98#'
              list2.pdes = '汽油'
              list2.price = datas[key]
              lists.push(list2)
            } else if (key === '0h') {
              let list3 = {}
              list3.pname = '0#'
              list3.pdes = '柴油'
              list3.price = datas[key]
              lists.push(list3)
            }
          }          
          that.lists = lists
        } else {
          that.lists = ''
        }
      })
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.white{
  fill: #fff;
}
.blue {
  color: #4F91F2;
}
.text {
  border: none;
  background: transparent;
  color: #333;
}
.text:after {
  border: none;
}
h2 {
  font-weight: normal;
  font-size: 20px;
  color: #FF3653;
  margin: 0;
}
.title{
  font-size: 20px;
  color: #222;
  vertical-align:baseline;
}
.title+.des{
  font-size: 12px;
  color: #888;
}
h2>span.des{
  font-size: 50%;
  color: #333;
}
</style>

</body>
</html>

